<template>
    <el-row type="flex" style="width: 100%">
        <el-col>
            <el-table
                    ref="multipleTable"
                    :data="data"
                    v-loading="loading"
                    :element-loading-text="$t('common.loading')"
                    element-loading-spinner="el-icon-loading"
                    :stripe="stripe"
                    border
                    :max-height="maxHeight || 480"
                    size='mini'
                    tooltip-effect="light"
                    :row-class-name="rowClassName"
                    @selection-change="selectionChange"
                    style="width: 100%">
                <span v-for="column in columns">

                <el-table-column
                        v-if="!column.render"
                        :type="column.type"
                        :width="column.width"
                        :prop="column.prop"
                        :label="column.label"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                                 v-if="column.render"
                                 :type="column.type"
                                 :width="column.width"
                                 :prop="column.prop"
                                 :label="column.label"
                                 :fixed="column.fixed ?column.fixed:false"
                                 :show-overflow-tooltip="column.tooltip || column.tooltip === undefined">
                    <template slot-scope="scope">
                        <expand :scope="scope" :render="column.render"></expand>
                    </template>
                </el-table-column>
                </span>

            </el-table>
            <el-pagination
                    v-if="pagination"
                    class="page"
                    v-show="total > 10"
                    style="float: left"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    background
                    :page-sizes="pageSizes"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            <div style="padding-top: 20px;padding-left: 20px;float: left;">
                <div style="height:28px;line-height: 28px;display: inline-block">
                    <slot name="tableInfo">
                    </slot>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import expand from './expand'

    export default {
        components: {
            expand
        },
        props: {
            getTableList: {
                type: Function,
            },
            rowClassName: {
                type: Function,
                default(){
                    return ()=>{
                        return ''
                    }
                }
            },
            columns: {
                type: Array,
                default() {
                    return [];
                }
            },
            refresh: {
                type: Boolean,
                default() {
                    return false
                }
            },
            filter:{
                type:Object,
                default(){
                    return {}
                }
            },
            maxHeight:{
                type:Number,
                default:0
            },
            dataCount:{
                type:Number,
                default:0
            },
            stripe:{
                type:Boolean,
                default:true
            },
            selectRow:{
                type:Array,
                default(){
                    return []
                }
            },
            pagination:{
                type:Boolean,
                default:true
            },
            changeRow: {
                type: Object,
                default(){
                    return {}
                }
            },
        },
        watch: {
            refresh(newV, oldV) {
                if (newV === true) {
                    //重置刷新监听变量
                    this.$emit("update:refresh", !newV)
                    this.handleGetTableList()
                }
            },
            changeRow(newV, oldV) {
                if(newV && newV._Id){
                    this.data.map(v=>{
                        if(v[newV._Id] === newV[newV._Id]){
                            for(let key of Object.keys(newV)){
                                if(key !== '_Id'){
                                    v[key]=newV[key]
                                }
                            }
                        }
                    })
                }
            }
        },
        data() {
            return {
                loading: false,
                data: [],
                pageSizes: [10, 20, 50],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                Vue: this
            }
        },
        methods: {
            handleCurrentChange() {
                this.handleGetTableList();
            },
            handleSizeChange() {
                this.currentPage = 1;
                this.handleGetTableList();
            },
            selectionChange(val){
                this.$emit('update:selectRow',val)
            },
            handleGetTableList() {
                let params = {
                    pageSize: this.pageSize,
                    currentPage: this.currentPage,
                }
				if(this.dataCount > 0) {
					params = {
						count: this.dataCount
					}
				}
				Object.assign(params, this.cloneFilter)
				this.loading = true
				this.getTableList(params).then(response => {
					if(response && response.data) {
						this.data = response.data
						this.total = response.totalCount;
						/*this.data=[{'id':'01','domain':'http://asd'},
                {'id':'01','domain':'http://asd'},
                {'id':'01','domain':'http://asd'},
                {'id':"04",'domain':'http://asd'}]
						this.total = 3;*/
					} else {
						this.data = []
						this.total = 0
					}
                }).finally(() => {
                    this.loading = false
                })
            },
        },
        created() {
            this.handleGetTableList()
        },
        activated(){
            this.handleGetTableList()
        },
        computed:{
            cloneFilter(){
                return this.deepCopy(this.filter)
            }
        },
    }
</script>

<style scoped>
 .page{
  padding-top: 20px;
 }
</style>